<template>
  <div class="flex flex-col gr-16">
    <a-row :gutter="16">
      <a-col :span="16">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card>
              <div id="tag" @click="go('/home/priceTag/')"></div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card>
              <div id="station" @click="go('/home/station/')"></div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8">
        <a-card>
          <div id="queue" @click="go('/home/sendqueue/')"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row class="flex-2 h-full">
      <a-col>
        <a-card :title="t['设备变动频次']">
          <div id="device"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { getHomePageState } from "@/api/service/home";

import { LineChart, PieChart } from "echarts/charts";
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent
} from "echarts/components";
import * as echarts from "echarts/core";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { useRouter } from "vue-router";
import { deviceData, queueData, stationData, tagData } from "./data";
import { deviceOptions, queueOptions, stationOptions, tagOptions } from "./options";

const t = translate("公共模块");
const router = useRouter();
const go = (path: string) => {
  router.push(path);
};
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  LineChart,
  UniversalTransition,
  GridComponent
]);
const echartsList = [
  {
    id: "station",
    options: stationOptions
  },
  {
    id: "tag",
    options: tagOptions
  },
  {
    id: "queue",
    options: queueOptions
  },
  {
    id: "device",
    options: deviceOptions
  }
];

const init = () => {
  getHomePageState().then((res) => {
    const { tag, hz, queue, station } = res.data;
    tagData.value.series.forEach((item) => {
      item.data[0]!.value = tag.offline;
      item.data[1]!.value = tag.online;
    });
    queueData.value.series.forEach((item) => {
      item.data[2]!.value = queue.timeout;
      item.data[1]!.value = queue.updated;
      item.data[0]!.value = queue.updating;
    });
    deviceData.value.series.forEach((item) => {
      item.data = Object.values(hz).map((e: any) => parseInt(e, 10));
    });
    deviceData.value.xAxis.data = Object.keys(hz).map((e: any) => e);
    stationData.value.series.forEach((item) => {
      item.data[0]!.value = station.offline;
      item.data[1]!.value = station.online;
    });

    echartsList.forEach((item) => {
      const dom = document.getElementById(item.id);
      if (!dom) return;
      let charts: any = null;
      if (!dom.querySelector("canvas")) {
        charts = echarts.init(dom);
      }

      charts?.setOption(item.options.value, true);
    });
  });
};
// onMounted(() => {
//   nextTick(() => {
//     init();
//   });
// });
watch(
  translate,
  () => {
    nextTick(() => {
      init();
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
#queue,
#station,
#tag {
  height: 100%;
  min-height: 300px;
}
#device {
  min-height: 330px;
  height: 100%;
}
</style>
